<template>
  <div class="item-wapper">
    <div class="item" v-for="(item,key) in content">
      <div class="item-t-bar">
        <li @click="deleteItem(key)" title="删除">&#xf00d;</li>
        <li @click="clearStyle(key)" title="恢复样式"  v-if="item.type=='text'">&#xf122;</li>
        <li @click="enditorText(key)" title="编辑内容"  v-if="item.type=='text'">&#xf044;</li>
        <li @click="editImg(key)" title="重新选择"  v-if="item.type=='image'">&#xf044;</li>
        <li @click="bold(key)" title="加粗"  v-if="item.type=='text'">&#xf032;</li>
        <li @click="up(key)" title="上移">&#xf062;</li>
        <li @click="down(key)" title="下移">&#xf063;</li>
        <li @click="upFontSize(key)" title="加大字号"  v-if="item.type=='text'">&#xf15d;</li>
        <li @click="downFontSize(key)" title="减小字号"  v-if="item.type=='text'">&#xf15e;</li>
        <li @click="addText(key)" title="添加文字" style="float: left">&#xf034;</li>
        <li @click="addImg(key)" title="添加图片" style="float: left">&#xf03e;</li>
      </div>
      <div class="item-t" v-if="item.type=='text'" :style="item.style">{{item.value}}</div>
      <div class="item-i" v-if="item.type=='image'"><img style="max-width: 290px" :src="item.value"></div>
    </div>
    <el-dialog :title="controller.editorTitle" :visible.sync="controller.dialogTextVisible">
      <el-form>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="controller.editorText">
        </el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveText('cancel')">取 消</el-button>
        <el-button type="primary" @click="saveText('ok')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "heima",
    props:{
      datas : {
        type:Array,
        default:function () {
          return [
            {
              type: 'text',
              value: '请输入文章内容...'
            }
          ]
        }
      }
    },
    data(){
      return {
        text:{
          addText:'添加文字',
          editText:'编辑文字'
        },
        controller:{
          editorKey : 0,
          editorTitle:'',
          editorText : "",
          dialogTextVisible:false
        },
        content:[]
      }
    },
    created(){
      this.setContent(this.datas)
    },
    methods:{
      setContent : function(data){
        if(data.length>0){
          this.content = data;
        }else{
          this.content = this.datas
        }
      },
      deleteItem:function(key){
        if(this.content.length>1) {
          this.$confirm('删除后不可找回，确认删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.content.splice(key, 1)
            this.$message({type: 'success', message: '删除成功!'});
          })
        }else{
          this.$message({ type: "warning", message: "不能全部删除内容，请编辑！" });
        }
      },
      clearStyle:function(key){
        this.getStyle(key,'w',"0")
        this.$set(this.content[key],'style',{})
      },
      // 编辑
      editImg : function(key){
        this.$emit("addImg",{key:key,type:'edit'});
      },
      // 增加或者删除
      addImg : function(key){
        this.$emit("addImg",{key:key,type:'add'});
      },
      // 添加文字
      addText:function(key){
        this.controller.editorTitle=this.text.addText
        this.controller.editorKey=key
        this.controller.editorText=''
        this.controller.dialogTextVisible=true
      },
      // 编辑文本
      enditorText:function(key){
        this.controller.editorTitle=this.text.editText
        this.controller.editorKey=key
        this.controller.editorText=this.content[key].value
        this.controller.dialogTextVisible=true
      },
      // 保存图片
      saveImage: function(data,image){
        if(data.type=='add'){
          let value = {
            type:'image',
            value:image
          }
          this.content.splice(data.key,0,value)
        }else{
          this.$set(this.content[data.key], 'type', "image")
          this.$set(this.content[data.key], 'value', image)
        }
      },
      // 保存编辑和新增的文字
      saveText: function(button){
        if(button=='ok'){
          if(this.controller.editorText!='') {
            if (this.controller.editorTitle == this.text.editText) {
              this.$set(this.content[this.controller.editorKey], 'value', this.controller.editorText)
              this.controller.dialogTextVisible = false
            }else{
              this.content.splice(this.controller.editorKey,0,{type:'text',value:this.controller.editorText});
              this.controller.dialogTextVisible = false
            }
          }else{
            alert('文字内容不能为空！')
          }
        }else{
          this.controller.dialogTextVisible=false
        }
      },
      bold:function (key) {
        let temp = this.getStyle(key,'fontWeight',"normal")
        if(temp!='bold'){temp='bold';}else{temp='normal';}
        this.$set(this.content[key]['style'],'fontWeight',temp)
      },
      up : function(key){
        let i = key-1
        if(i>=0){
          this.content[i] = this.content.splice(key, 1, this.content[i])[0];
        }
      },
      down : function(key){
        let i = key+1
        if(i<this.content.length){
          this.content[i] = this.content.splice(key, 1, this.content[i])[0];
        }
      },
      upFontSize:function (key) {
        let temp = this.getStyle(key,'fontSize','12')
        this.$set(this.content[key]['style'],'fontSize',(parseInt(temp)+1)+"px")
      },
      downFontSize:function (key) {
        let temp = this.getStyle(key,'fontSize','12')
        this.$set(this.content[key]['style'],'fontSize',(parseInt(temp)-1)+"px")
      },
      // 获取一个样式
      getStyle:function(key,name,defValue){
        let style=this.content[key]['style']
        if(style==undefined){
          style = {}
          this.$set(this.content[key],'style',style)
        }
        let temp = style[name]
        if(temp==undefined){
          temp=defValue
          this.$set(this.content[key]['style'],name,defValue)
        }else{
          temp=temp.toLowerCase()
        }
        return temp.replace(';','').replace('px','')
      },
      // 过滤空样式
      getItemStyle:function (style) {
        if(style!=undefined){
          return style
        }
        return {}
      },
      getContent:function () {
        return JSON.stringify(this.content)
      }
    }
  }
</script>

<style scoped>
  .item-wapper{
    border: 1px solid #dbdbdb;
    width: 310px;
    max-height: 550px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px 10px;
    border-radius: 10px;
  }
  .item-wapper::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .item-wapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #dbdbdb;
  }
  .item-wapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
    background: transparent;
  }
  .item{
    position: relative;
    overflow: hidden;
    text-align: left;
    border: 1px solid #ffffff;
  }
  .item-t{
    min-height: 30px;
    font-size: 12px;
    line-height: 150%;
    margin: 5px 0px;
  }
  .item-i{
    margin: 5px 0px;
  }
  .item-i img{
    padding: 0px;
    margin: 0px;
    display: block;
    border: none;
  }
  .item:hover{
    border: 1px solid #dbdbdb;
    border-radius: 10px;
  }
  .item:hover .item-t-bar{
    display: inherit;
  }
  .item-t-bar{
    display: none;
    position: absolute;
    background-color: red;
    opacity: 0.9;
    width: 100%;
    color: #FFFFFF;
    z-index: 999;
    overflow: hidden;
  }
  .item-t-bar li{
    list-style: none;
    float: right;
    line-height: 30px;
    background-color: red;
    font-size: 10px;
    font-family: "FontAwesome";
    padding: 0px 5px;
    cursor: pointer;
  }

</style>
